---
title: Card
description: Shows a card component.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/card?raw';

<LinkButton href="https://rn-primitives.vercel.app/types">
  Types Primitives
</LinkButton>
<LinkButton href='/components/text'>Text Component</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/card">
  Demo
</LinkButton>

<br />

Shows a card component.

## Installation
<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add card
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependencies">
      Before copy/pasting, add the <a href='/components/text' className='text-white font-bold'>text component</a> to your project.
    </Aside>


    **Copy/paste the following code to `~/components/ui/card.tsx`**

    <Code code={importedCode} lang="tsx" title="~/components/ui/card.tsx" />
  </TabItem>
</Tabs>
## Usage

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '~/components/ui/card';
import { Text } from '~/components/ui/text';

function Example() {
  return (
      <Card className='w-full max-w-sm'>
        <CardHeader>
          <CardTitle>Card Title</CardTitle>
          <CardDescription>Card Description</CardDescription>
        </CardHeader>
        <CardContent>
          <Text>Card Content</Text>
        </CardContent>
        <CardFooter>
          <Text>Card Footer</Text>
        </CardFooter>
      </Card>
  );
}
```

## Props

### Card

Extends [`View`](https://reactnative.dev/docs/view#props) props

### CardHeader

Extends [`View`](https://reactnative.dev/docs/view#props) props

### CardTitle

Extends [`Text`](https://reactnative.dev/docs/text#props) props

### CardDescription

Extends [`Text`](https://reactnative.dev/docs/text#props) props

### CardContent

Extends [`View`](https://reactnative.dev/docs/view#props) props

### CardFooter

Extends [`View`](https://reactnative.dev/docs/view#props) props
        
